<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>offline</title>
</head>
<body>
  <div>your network status: 
    <span id="status"></span>
	</div>
	<script>
	  var $ = function(selector) {
			var ele = document.querySelector(selector)

		  console.log(ele)
		  return ele
		}

		//var status = $('#status')
		//console.log(status)
		// 上面是什么情况? 结果被转换了?!
		// 因为变量与id同名?

		var $status = document.getElementById('status')

		var updateStatus = function() {
		  // 注意使用navigator.onLinen属性
		  $status.textContent = navigator.onLine ? 'online' : 'offline'
		}

    window.onload = updateStatus
	  window.onoffline = updateStatus
	  window.ononline = updateStatus

	</script>
</body>
</html>
